<template>
  <div class="deviceMap-container">
    <bmap></bmap>
    <panel :tab_options="tab_options">
      <template v-slot:1>
        <h2 style="text-align: center">{{ Device.name }}</h2>
        <el-card
          v-for="(info,index) in Device.info"
          :key="info.ability+index"
          class="box-card"
          body-style="{ padding: '0px' }"
          style="margin-bottom: 1em"
        >
          {{ info.ability }}
        </el-card>
      </template>
      <template v-slot:2>
        <el-row :gutter="10" >
          <el-col :span="12" v-for="(data,index) in Device.realtime_date"
                  :key="data+index"
                  style="margin-bottom: 1em"
          >
            <el-tag type="info" effect="plain">
              {{ index }}:{{ data }}
            </el-tag>
          </el-col>
        </el-row>
      </template>
      <template v-slot:3>
        <el-row :gutter="10">
          <el-col :span="6">10</el-col>
        </el-row>
      </template>
    </panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sensor: [],
      tab_options: [{
        label: '基础信息'
      }, {
        label: '实时数据'
      }, {
        label: '历史测试'
      }],
      Device: {
        name: '隔壁老王的设备',
        info: [
          {
            ability: '演示单位'
          }, {
            ability: '612'
          }, {
            ability: '广东省深圳市南山区桃园路2号深圳市南山区人民政府(113.936543,22.538501)'
          }
        ],
        realtime_date: {
          '累计电能数值': '0w',
          '累计数值': '0w',
          '累电能数值': '0w',
          '计电能数值': '0w',
          '累计电能值': '0w'
        }
      }
    }
  },
  components: {
    'bmap': _ => import('@/layout/components/map'),
    'panel': _ => import('@/layout/components/panel')
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
